<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
   <c2></c2>
 </div>


     <script src="../js/vue.js"></script>
     <script>
       //创建组件构造器  子组件
       const cpnC1=Vue.extend({
         template:`
            <div>
              <h2>我是标题1</h2>
              <p>我是内容哈哈</p>
            </div>
         `
       })
       //创建组件构造器   父组件
       const cpnC2=Vue.extend({
         template:`
            <div>
              <h2>我是标题2</h2>
              <p>我是内容2哈哈</p>
              <c1></c1>
            </div>
         `,
         //cpnC1 是 cpnC2组件的子组件
         components:{
           'c1': cpnC1
         }
       })

       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
         },
         components:{
           'c2': cpnC2
         }
       })
     </script>
</body>
</html>